import Markdown from "@/components/Markdown";
import { LeftOutlined } from "@ant-design/icons";
import { Button, Card, Form, Input } from "antd";
import React from "react";
import "./index.less";

const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 22,
  },
  labelAlign: "left",
};

const Add = (props) => {
  return (
    <div className="page-container">
      <div className="page-header">
        <LeftOutlined className="icon" />
        <div className="page-header__title">新建文章</div>
      </div>
      <div className="page-content">
        <Form {...layout}>
          <Form.Item className="title" required label={"标题"} name={"title"}>
            <Input maxLength={256} />
          </Form.Item>
          <Form.Item required label={"内容"} name={"content"}>
            <Card bordered={false}>
              <Markdown />
            </Card>
          </Form.Item>
        </Form>
      </div>
      <div className="page-bottom">
        <div className="cancle">
          <Button>取消</Button>
        </div>
        <div className="confirm">
          <Button>发布</Button>
        </div>
      </div>
    </div>
  );
};

export default Add;
